<template>
	<view>
		
		<u-popup :show="showone" mode="center" bgColor="transparent" @close="close" @open="open">
			<view class="dingweis" @click="onguanbi">
				
			</view>
		        <view class="fulis_tc">
		            <view class="tc_tops">
		            	任务中心
		            </view>
					<view class="tc_btms">
						
						<view class="btms_list">
							<view class="btms_left">
								<div class="card">
								  <!-- 左侧图片 -->
								  <view class="card-img">
								  	<img style="padding: 15rpx;" src="https://img.jingkakeji.com/img/static/tucengone.png" alt="图片" />
								  </view>
								  
								  
								  <!-- 右侧内容（Flex 垂直排列） -->
								  <div class="card-content">
								    <!-- 右上大文字 -->
								    <div class="title">这里是主标题</div>
								    
								    <!-- 右下小图片+文字（Flex 水平排列） -->
								    <div class="footer">
								      
								      <span>这里是副标题</span>
								    </div>
								  </div>
								</div>
							</view>
							<view class="btms_rights">
								<image style="width: 150rpx;height: 55rpx;margin-top: 20rpx;" src="https://img.jingkakeji.com/img/static/quwanc.png" mode=""></image>
							</view>
						</view>
					</view>
		        </view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		props:['showone'],
		data() {
			return {
			// show: false
			}
		},
		
		methods: {
			onguanbi(){
				this.showone = false
			},
			   open() {
				   // this.show=true
			        // console.log('open');
			      },
			      close() {
			        this.showone = false
			        // console.log('close');
			      }
		}
	}
</script>

<style lang="scss">
	.fulis_tc{
		width: 600rpx;
		height: 800rpx;
		background: url("https://img.jingkakeji.com/img/static/xiaotan.png");
		background-repeat: no-repeat;
		 background-size: contain;
	}
	.tc_tops{
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 38rpx;
		color: #ffffff;
	}
	.tc_btms{
		width: 100%;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.dingweis{
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		background: url("https://img.jingkakeji.com/img/static/lianhew.png");
		background-repeat: no-repeat;
		 background-size: contain;
		// background-color: aqua;
		right: 20rpx;
		top:20rpx;
	}
	.btms_list{
		width: 85%;
		height: 100rpx;
		display: flex;
		 border-bottom: 1px dashed #000; /* 在顶部创建一条1像素宽，黑色，虚线的边框 */ 
	}
	.btms_left{
		width: 70%;
		height: 100%;
	}
	.card {
	  display: flex;          /* 整体横向排列 */
	  gap: 12px;             /* 左侧图片和右侧内容的间距 */
	  align-items: flex-start; /* 顶部对齐 */
	  // padding: 12px;
	  // border: 1px solid #eee;
	}
	
	.card-img {
	  width: 50px;          /* 左侧图片宽度 */
	  height: 40px;         /* 高度自适应 */
	  object-fit: cover;     /* 防止图片变形 */
	  margin-top: 10rpx;
	  background: url("https://img.jingkakeji.com/img/static/curad.png");
	  background-repeat: no-repeat;
	   background-size: contain;
	}
	
	.card-content {
	  display: flex;
	  flex-direction: column; /* 右侧内容垂直排列 */
	  gap: 8px;             /* 主标题和副标题的间距 */
	}
	
	.title {
	  font-size: 16px;
	  font-weight: bold;
	  color: #FFFFFF;
	}
	
	.footer {
	  display: flex;         /* 右下小图片+文字横向排列 */
	  align-items: center;   /* 垂直居中 */
	  gap: 6px;             /* 小图标和文字的间距 */
	  font-size: 12px;
	  color: #9AA1D1;
	}
	
	.small-img {
	  width: 16px;
	  height: 16px;
	}
	.btms_rights{
		
	}
</style>
